const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const HtmlWebpackIncludeSiblingChunksPlugin = require('html-webpack-include-sibling-chunks-plugin')
const glob = require('glob')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')

// 使用 WEBPACK_SERVE 环境变量检测当前是否是在 webpack-server 启动的开发环境中
const dev = Boolean(process.env.NODE_ENV == 'development')

//多页面
const entries = glob.sync('./src/**/index.js')
const entry = {
  index: ['./src/views/index/index.js'],
  classify: ['./src/views/classify/index.js'],
  answer: ['./src/views/answer/index.js'],
  proposal: ['./src/views/proposal/index.js'],
}
const htmlPlugins = [
  new HtmlWebpackPlugin({
    template: './src/views/index/index.html',
    filename: 'index.html',
    chunksSortMode: 'none',
    chunks: ['index']
  }),
  new HtmlWebpackPlugin({
    template: './src/views/classify/index.html',
    filename: 'classify.html',
    chunksSortMode: 'none',
    chunks: ['classify']
  }),
  new HtmlWebpackPlugin({
    template: './src/views/answer/index.html',
    filename: 'answer.html',
    chunksSortMode: 'none',
    chunks: ['answer']
  }),
  new HtmlWebpackPlugin({
    template: './src/views/proposal/index.html',
    filename: 'proposal.html',
    chunksSortMode: 'none',
    chunks: ['proposal']
  })
]
for (const path of entries) {
  const template = path.replace('index.js', 'index.html')
  const chunkName = path.slice('./src/views/'.length, -'/index.js'.length)
  entry[chunkName] = dev ? [path, template] : path
  htmlPlugins.push(new HtmlWebpackPlugin({
    template,
    filename: chunkName + '.html',
    chunksSortMode: 'none',
    chunks: [chunkName]
  }))
}

module.exports = {
  // devtool: dev ? 'cheap-module-eval-source-map' : 'hidden-source-map',
  entry,
  resolve: {
    extensions: ['.js', '.json'],
    alias: {
      '@': resolve(__dirname, 'src')
    }
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
       use: [{
        loader: 'babel-loader',
        options: {
          cacheDirectory: true
        }
      }]
      },
      {
        test: /\.css$/,
        use: [dev ? 'style-loader' : MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
      },
      {
        test: /\.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg|svgz)(\?.+)?$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10000
            }
          }
        ]
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
            options: {
              root: resolve(__dirname, 'src'),
              attrs: ['img:src', 'link:href']
            }
          }
        ]
      }
    ]
  },
  plugins: [
   new MiniCssExtractPlugin({
    filename: '[contenthash].css',
    chunkFilename: '[contenthash].css'
  }),
  new OptimizeCSSAssetsPlugin(),
  new HtmlWebpackIncludeSiblingChunksPlugin(),
  ...htmlPlugins,
   new webpack.HashedModuleIdsPlugin()
  ],
  optimization: {
   runtimeChunk: true,
    splitChunks: {
      chunks: 'all'
    }
  },
  externals:{
    'jquery':'window.jQuery'
  }
}